<template>
  <div class="about">
    <h1>分页</h1>
    <BasePage 
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :total="total"
      :pageData="pageData"
    ></BasePage>
  </div>
</template>
<script>
import BasePage from '@/components/basePage.vue'
import axios from 'axios'
export default {
  components: {
    BasePage
  },
  data() {
    return {
      page: 0,
      size: 5,
      total: 0,
      pageData: []
    }
  },
  mounted() {
    this.getPageData({page: 0, size: 5}) 
  },
  methods: {
    handleSizeChange(size) {
      
    },
    handleCurrentChange(current) {
      this.getPageData({page: current-1 })
    },
    async getPageData({page, size = this.size}) {
       let data = await axios.get('http://localhost:3000/api/user/page', {
         params: {page,size}
       })
       this.total = data.data.total;
       this.pageData = data.data.data
    }
  }
}
</script>
